/* eslint react/prefer-stateless-function:0, react/prop-types:0 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Wrapper from './wrapper';
import { Button } from 'antd';
// import ErrorBoundary from '../../components/ErrorBoundary';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/braft.css';
import style from './style.css';
import * as actions from '../../actions/protocolAction';

@connect((state) => ({
  protocol: state.admin.protocol,
}), actions)
export default class extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.getProtocol();
  }

  render() {
    const { protocol, updateContent, submit } = this.props;
    const editorProps = {
      height: 400,
      initialContent: protocol,
      contentFormat: 'html',
      placeholder: '请填写内容',
      onHTMLChange: updateContent,
      controls: [
        'undo', 'redo', 'split', 'font-size', 'font-family', 'text-color',
        'bold', 'italic', 'underline', 'strike-through', 'text-align', 'split', 'headings', 'list_ul', 'list_ol',
        'split', 'link',
      ],
    };
    return (
      <Wrapper openKeys="article" selectedKeys="edit">
        <div className={style.pageTitle}>使用协议<span style={{ color: '#999', fontSize: '12px', margin: '0 0 0 10px' }}>用于首页弹框展示</span></div>
        <div className={style.editor}>
          <BraftEditor {...editorProps} />
        </div>
        <Button type="primary" size="large" style={{ marginTop: '20px' }} onClick={submit}>提交</Button>
      </Wrapper>
    );
  }
}
